<template>
	<div>
		<div class="topheader">
			<div class="img">
				<img :src="playlist.coverImgUrl" alt="" />
			</div>

			<div class="title">{{ playlist.name }}</div>
			<!-- 图标 -->
			<div class="button" @click="$router.push('/index/ranking'), getNavsBtnFun()">
				<span class="iconfont icon-fanhuipt"></span>
				{{ playlist.tags[0] || "排行榜" }}
			</div>
		</div>

		<dl class="musicList">
			<dt>
				<i class="iconfont icon-zanting-wangyiicon"
					@click="setFristId"></i>全部播放<span>共{{ playlist.tracks.length }}首</span>
			</dt>
			<dd v-for="(item, index) in playlist.tracks" :key="item.id" @click="setId(item.id)">
				<h1>{{ index + 1 }}</h1>
				<div class="info">
					<h2>{{ item.name }}</h2>
					<h3>
						<span v-for="value in item.ar" :key="value.id">{{ value.name }}&nbsp;</span>
					</h3>
				</div>
			</dd>
		</dl>
	</div>
</template>

<script>
	import {
		getPlaylistDetail
	} from "../../api/ranking";
	export default {
		data() {
			return {
				playlist: {
					coverImgUrl: "",
					tags: [""],
					tracks: [],
				},
			};
		},
		async created() {
			let queryId = this.$route.query;
			if (!("id" in queryId)) {
				this.$router.push("/index/ranking");
			}
			await getPlaylistDetail({
				id: queryId.id
			}).then((data) => {
				console.log(data);
				this.playlist = data.playlist;
			});
			this.$emit("getnavs-btn", false);
			this.$emit("get-style", true);
		},
		methods: {
			setFristId() {
				this.$emit("get-player-id", this.playlist.tracks[0].id);
			},
			setId(id) {
				// 播放全部歌曲
				this.$emit("get-play-all-id", this.$route.query.id); //传递歌单id
				this.$emit("get-player-id", id);
			},
			getNavsBtnFun() {
				this.$emit("getnavs-btn", true);
				this.$emit("get-style", false);
			},
		},
	};
</script>

<style lang="less">
	.topheader {
		height: 270px;
		position: relative;

		.img {
			background-color: pink;
			width: 100%;
			height: 270px;
			position: relative;

			img {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				margin: auto;
				width: 100%;
			}
		}

		.title {
			font-size: 18px;
			position: absolute;
			left: 18px;
			bottom: 18px;
			color: #fff;
		}

		.button {
			font-size: 18px;
			position: absolute;
			left: 12px;
			top: 12px;
			color: #fff;
		}
	}

	.musicList {
		background-color: #fff;
		width: 100%;
		border-radius: 7px;
		position: relative;
		top: -7px;
		padding-bottom: 50px;

		dt {
			height: 36px;
			line-height: 36px;
			font-size: 16px;
			color: #454747;
			border-bottom: 1px solid #e3e3e3;

			span {
				font-size: 14px;
				color: #797b7a;
			}

			i {
				font-size: 25px;
				width: 44px;
				text-align: center;
				display: inline-block;
			}
		}

		dd {
			border-bottom: 1px solid #e3e3e3;
			height: 53px;
			display: flex;

			h1 {
				flex: 0 0 44px;
				line-height: 53px;
				text-align: center;
				font-size: 16px;
				color: #6d6e6e;
			}

			.info {
				flex: 1;

				h2 {
					font-size: 16px;
					color: #1b1c1c;
					margin-top: 10px;
					// 1、固定宽度（高度可有可无）：width: 195px;
					// 2、把盒子转成弹性伸缩盒子：
					display: -webkit-box;
					// 3、弹性盒子排列方式：垂直排列：
					-webkit-box-orient: vertical;
					// 4、规定显示几行文本：
					-webkit-line-clamp: 1;
					// 5、溢出隐藏：
					overflow: hidden;
				}

				h3 {
					font-size: 12px;
					color: #929393;

					display: -webkit-box;
					// 3、弹性盒子排列方式：垂直排列：
					-webkit-box-orient: vertical;
					// 4、规定显示几行文本：
					-webkit-line-clamp: 1;
					// 5、溢出隐藏：
					overflow: hidden;
				}
			}
		}
	}
</style>
